<!DOCTYPE html>
{% load static %}
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>web_chart</title>
    <link rel="stylesheet" href="{% static 'css/register_login/normalize.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/register_login/style.css' %}">
    <link rel="shortcut icon" href="{% static 'ico/favicon.ico' %}"/>
</head>
<style>
    .registerLogin {
        background: #26e005;
        border: none;
        width: 100%;
        padding: 10px 0;
        font-weight: 600;
        color: #fff;
        cursor: pointer;
    }

    .smsBtn {
        background: #ee8506;
        border: none;
        width: 100%;
        padding: 10px 0;
        font-weight: 600;
        color: #fff;
        cursor: pointer;
    }

    .error_msg {
        position: relative;
        margin-left: 35px;
        color: red;
    }

    .red_input {
        border: 1px solid red;
    }
</style>

<body style="">
<div id="formContainer" class="dwo">
    <div class="formLeft">
        <img src="{% static 'images/rotation_chart/default.png' %}">
    </div>
    <div class="formRight">
        <!-- Forgot password form -->
        <form id="forgot" class="otherForm" novalidate>
            <header>
                <h1>忘记密码</h1>
                <p>输入邮箱找回密码</p>
            </header>
            <section>
                <label>
                    <p>邮箱</p>
                    <input type="email" placeholder=" ">
                    <div class="border"></div>
                </label>
                <button type="submit">发送邮件</button>
            </section>
            <footer>
                <button type="button" class="forgotBtn">返回</button>
            </footer>
        </form>

        <!-- Login form -->
        <form id="login" novalidate>
            {% csrf_token %}
            <header>
                <h1>欢迎您的到来</h1>
                <p>第一次登录即默认注册</p>
            </header>
            <section>
                <label>
                    <p>手机号</p>
                    <input type="text" placeholder="请输入手机号" id="id_telephone" name="telephone">
                    <span class="error_msg"></span>
                    <div class="border"></div>
                </label>
                <label>
                    <p>密码</p>
                    <input type="password" placeholder="请输入密码" id="id_password" name="password">
                    <span class="error_msg"></span>
                    <div class="border"></div>
                </label>
                <label>
                    <p>验证码</p>
                    <input type="text" placeholder="请输入验证码" value="" id="id_code" name="code">
                    <span class="error_msg"></span>
                    <div class="border"></div>
                </label>
                <div>
                    <input type="button" value="点击发送验证码" id="smsBtn" class="smsBtn">
                </div>
                <br>
                <input type="button" value="登录" id="registerLogin" class="registerLogin">
            </section>
            <footer>
                <button type="button" class="forgotBtn">忘记密码？</button>
            </footer>
        </form>
    </div>
</div>
<script src="{% static 'js/register_login/jquery-1.10.2.js.下载' %}"></script>
<script src="{% static 'js/register_login/jquery.min.js.下载' %}"></script>
<script src="{% static 'js/register_login/script.js.下载' %}"></script>
<script>
    $(function () {
        smsClick();
        loginRegister();
        clickHtml();
    })

    // 发送验证码
    function smsClick() {
        $("#smsBtn").click(function () {
            var $telephone = $("#id_telephone").val()

            $.ajax({
                url: "{% url 'tencent_sms' %}",
                type: "POST",
                data: {telephone: $telephone, tpl: 'login', csrfmiddlewaretoken: '{{ csrf_token }}'},
                dataType: "JSON",
                success: function (ret) {
                    if (ret.status) {
                        sendSmsRemind();
                    } else {
                        // 渲染错误
                        $.each(ret.msg, function (key, value) {
                            $('#id_' + key).next().text(value[0])
                            // attr 只有添加的一个属性 其他的全部消失 addClass 在原有的基础上添加类
                        })
                    }
                }
            })
            // 获取焦点 input红框消失 this： 当前操作的对象
            $('input').focus(function () {
                $(this).next().empty()
            })
        })
    }

    // 注册登录
    function loginRegister() {
        $("#registerLogin").click(function () {
            $.ajax({
                url: "{% url 'register_login' %}",
                type: "POST",
                data: $("#login").serialize(),
                dataType: "JSON",
                success: function (ret) {
                    if (ret.status) {
                        // 跳转到home
                        location.href ="{% url 'home' %}"

                    } else {
                        // 渲染错误
                        $.each(ret.msg, function (key, value) {
                            $('#id_' + key).next().text(value[0])
                            // attr 只有添加的一个属性 其他的全部消失 addClass 在原有的基础上添加类
                        })
                    }
                }
            })
            // 获取焦点 input红框消失 this： 当前操作的对象
            $('input').focus(function () {
                $(this).next().empty()
            })
        })
    }

    /*倒计时*/
    function sendSmsRemind() {
        var $smsBtn = $('#smsBtn');
        $smsBtn.prop('disabled', true); // 禁用
        var time = 60;
        var remind = setInterval(function () {
            $smsBtn.val(time + '秒重新发送');
            time = time - 1;
            if (time < 1) {
                clearInterval(remind);
                $smsBtn.val('点击获取验证码').prop('disabled', false);
            }
        }, 1000)
    }

    // 点击出现文字
    function clickHtml() {
        $("html").click(function (e) {
            var a_idx = Math.floor((Math.random() * 26));
            var a = new Array("（づ￣3￣）づ╭❤～", "（づ￣3￣）づ╭❤～", "大头", "李", "开心", "考研必过", "(*^▽^*)", "元气满满", "开心", "快乐",
                "善良", "可爱", "暴富", "暴瘦", "考研必过", "加油", "喜欢你", "小富婆", "考研必过", "考研必过", "（づ￣3￣）づ╭❤～",
                "木啊", "你最棒", "可爱", "考研必过", "（づ￣3￣）づ╭❤～", "❤"
            );
            var color1 = Math.floor((Math.random() * 255));
            var color2 = Math.floor((Math.random() * 255));
            var color3 = Math.floor((Math.random() * 255));

            var $i = $("<span/>").text(a[a_idx]);
            a_idx = (a_idx + 1) % a.length;
            var x = e.pageX,
                y = e.pageY;
            $i.css({
                "z-index": 9999999999999,
                "top": y - 20,
                "left": x,
                "position": "absolute",
                "font-family": "mmm",
                "fontSize": Math.floor((Math.random() * 22) + 15),
                "font-weight": "bold",
                "color": "rgb(" + color1 + "," + color2 + "," + color3 + ")",
                "-webkit-user-select": "none",
                "-moz-user-select": "none",
                "-ms-user-select": "none",
                "user-select": "none",
            });
            $("body").append($i);
            $i.animate({
                    "top": y - 200,
                    "opacity": 0
                },
                1000,
                function () {
                    $i.remove();
                });
        });
    }

</script>
</body>

</html>